import React, {Component, Fragment} from 'react'
import {SectionsContainer, Section} from 'react-fullpage';
import HeaderCom from '../components/header'
import FooterCom from '../components/footer'
import ImgSh from '../image/imgSh.png'
import logo from '../logo.svg';
import ewm from '../image/ewm.jpg'
import {Layout, Carousel} from 'antd';
import AboutMe from '../components/about'
import Works from '../components/works'
import Techs from '../components/tech'
import ContractME from '../components/contract'
import Helper from '../helper/index'
import banner1  from '../image/banner1.jpg'
import banner2  from '../image/banner2.jpg'
import banner3  from '../image/banner3.jpg'

const {Content} = Layout;

const {showHtml} =new Helper()

const imgs = [
    {
        h4:"Goodliness,to be continued",
        h2:"让<span>美好持续</span>发生",
        h3:"我们有让美好持续发生的愿望，更有让美好持续发生的能力",
        bakImg:`url(${banner1})`
    },
    {
        h4:"From childhood...",
        h2:"<span>从童年起，</span>我便独自一人",
        h3:"照顾着历代的星辰",
        bakImg:`url(${banner2})`
    },
    {
        h4:"Life is endless",
        h2:"<span>每一个</span>不曾起舞的日子",
        h3:"都是对生命的辜负。",
        bakImg:`url(${banner3})`
    },
    {
        h4:"Goodliness,to be continued",
        h2:"让<span>美好持续</span>发生",
        h3:"我们有让美好持续发生的愿望，更有让美好持续发生的能力",
        bakImg:'url("http://pic1.win4000.com/wallpaper/5/56823bdb472bc.jpg")'
    }
]

class ShowPage extends Component {
    constructor(props){
        super(props)
        this.state={
            listBan:imgs,
            pTop:'0px'
        }
    }

    handleBanner(){
        return (
            this.state.listBan.map((item, index)=>{
                return (
                    <div className="item" key={index}>
                        <div className="items scaleBg"  style={{backgroundImage:item.bakImg}}></div>
                        <div className="inner">
                            <div className="block_txt">
                                <h4> {item.h4}</h4>
                                <h2>{showHtml(item.h2)}</h2>
                                <h3>{item.h3}</h3>
                                <h2>&nbsp;</h2>  
                                <h3 className="animated fadeInDown"><i className="fa fa-angle-double-down fa-2x"></i></h3>                          
                            </div>
                        </div>
                    </div>
                )
            })
        ) 
    }

    componentDidMount(){
        
        
    }

    componentDidUpdate(prevProps, prevState){
        // console.log(prevProps)
        // console.log(prevState)
        // if(this.props.location.hash=='#sectionTwo'){
        //     console.log(123)
        // }
    }

    handleTop(){
        this.setState({
            pTop:'64px'
        })
    }

    render(){
        let options = {
            sectionClassName:     'section',
            anchors:              ['sectionOne', 'sectionTwo', 'sectionThree', 'sectionFour', 'sectionFive'],
            scrollBar:            false,
            navigation:           true,
            verticalAlign:        false,
            sectionPaddingTop:    this.state.pTop,
            sectionPaddingBottom: '0px',
            arrowNavigation:      true
        };

        return (
            <Fragment>
                
                {/* <Header>
                    <HeaderCom logo={logo} initKey={'1'}  />
                </Header> */}
                {/* <Footer></Footer> */}
                <SectionsContainer className="container" {...options}>
                    <Section>
                        <Carousel autoplay> {this.handleBanner()}</Carousel>
                    </Section>

                    <Section>
                        <Layout className="layout" style={{height:"100%"}}>
                            <HeaderCom logo={logo} initKey={'1'} username={'GodenFreeman'} />  
                            <Content style={{ padding: '0 50px', background:'#fff' }}>
                                <AboutMe/>
                            </Content>
                            {/* <FooterCom /> */}
                        </Layout>
                    </Section>

                    <Section color="#E0E4CC">
                        <Layout className="layout" style={{height:"100%"}}>
                            {/* <HeaderCom logo={logo} initKey={'1'} />   */}
                            <Content style={{ padding: '0 50px',  }}>
                                <Works/>
                            </Content>
                            {/* <FooterCom /> */}
                        </Layout>
                    </Section>

                    <Section >
                        <Layout className="layout" style={{height:"100%"}}>
                            {/* <HeaderCom logo={logo} initKey={'1'} />   */}
                            <Content className='ContBg' style={{ padding: '0 50px'}}>
                                <Techs img={ImgSh} />
                            </Content>
                            {/* <FooterCom /> */}
                        </Layout>
                    </Section>

                    <Section >
                        <Layout className="layout" style={{height:"100%"}}>
                            {/* <HeaderCom logo={logo} initKey={'1'} />   */}
                            <Content style={{ padding: '0 50px', background:'#fff' }}>
                                <ContractME ewm={ewm} />
                            </Content>
                            <FooterCom index={'show'} logo={logo} />
                        </Layout>   
                    </Section>
                </SectionsContainer>
            </Fragment>
        )
    }
}

export default ShowPage